<template>
  <div class="title-view">
    <div>
      <div class="name">{{landInfo?.farmLandName}}</div>
      <div class="cropname" v-if="landInfo?.cropSeriesName">{{landInfo?.cropName}},{{landInfo?.cropSeriesName}}</div>
    </div>
    <div class="num">{{Number(landInfo?.mapAreaSize||0).toFixed(2)}}亩</div>
  </div>
    <CellGroup inset style="margin:0;">
      <Field
        label="地块分组"
        input-align="right"
        readonly
        :model-value="landInfo?.groupName"
        left-icon="envelop-o"
        :right-icon="showRightIcon?'arrow':''"
        @click="btnOpen(1)"
      />
      <Field
        clearable
        label="地块标签"
        :model-value="landInfo?.tagName"
        readonly
        input-align="right"
        left-icon="flag-o"
        :right-icon="showRightIcon?'arrow':''"
        @click="btnOpen(2)"
      />
      <!-- <Field
        clearable
        label="地块权属"
        :model-value="landInfo?.landBelong"
        readonly
        input-align="right"
        left-icon="flag-o"
        right-icon="arrow"
        @click="btnOpen(3)"
      /> -->
      <Field
        clearable
        label="地块位置" 
        :model-value="landInfo?.locationAddress"
        input-align="right"
        readonly
        @click="btnOpenMap(landInfo)"
        left-icon="location-o"
        right-icon="guide-o"
        :style="{'--van-field-right-icon-color':'#07c160'}"
      />
    </CellGroup>
    <Button plain style="margin:10px;" 
      v-if="showMore"
      @click="btnGoItem"
      icon="more-o"
      type="success"> 更多</Button>
</template>

<script setup lang="ts">
import {ref,onMounted} from "vue"
import {getLandDetail} from '@/api/gis'
import { wgs84togcj02 } from '@/utils/wgs84ToGaode';

import { Button,CellGroup,Field} from 'vant';
const emits = defineEmits(['onClick','onCancel'])
const props = defineProps({ 
  farmLandId:{
    type:String,
    default(){
      return ''
    }
  },
  showRightIcon:{
    type:Boolean,
    default:true
  },
  showMore:{
    type:Boolean,
    default:true
  }
})
const landInfo:any=ref({})
onMounted(async ()=>{
  getLandInfo()
})
const getLandInfo =()=>{
  getLandDetail({farmLandId:props.farmLandId}).then((res:any)=>{
      if(res.success){
        landInfo.value = res.data
      }
    })
}
const btnOpen = async (type:any) => {
  emits('onClick',type)
};
const btnGoItem = async () => {
  wx.miniProgram.navigateTo({url:`/pages/land/blockDetail/blockDetail?farmLandId=${landInfo.value.farmLandId}`})
};
const btnOpenMap =(item:any)=>{
  let lngobj = wgs84togcj02(Number(item.locationLatitude),Number(item.locationLongitude))
    wx.openLocation({
      latitude: lngobj[0],
      longitude:lngobj[1],
      name: item.farmLandName,
      address: item.locationAddress,
      scale: 15
  });
}

defineExpose({getLandInfo})

</script>

<style lang="scss" scoped>
.title-view{
  display: flex;
  justify-content:space-between;
  padding:10px 14px;

  .name,.num{
    color: #565656;
    font-size:16px;
    font-weight: bold;
  }
  .cropname{
    font-size:14px;
    color: #ff9c00;
  }
}
</style>